<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<h1 v-if="count < 6" v-change="count">内容</h1>
	<button @click="count++">加加</button>
	<button @click="count--">减减</button>
</div>
<script>
// 后期调用 v-标识
Vue.directive('change', {
	bind: function (el,bindings) {
		console.log('指令已经绑定到元素了（仅一次）')
		console.log(el)
		el.innerHTML = bindings.value;
	},
	inserted:function (el) {
		console.log('被绑定元素插入父节点时调用')
	},
	update: function (el,bindings) {
		console.log('指令的数据有所变化')
		el.innerHTML = bindings.value
	},
	unbind: function () {
		console.log('解除绑定了')
	}
})

new Vue({
	el: '#app',
	data: {
		count: 3
	}
})
</script>
</body>
</html>